// import { nord } from './nord'
@import './nord.scss';

// * {
//   background-color: var(--nord0) !important;
// }
[theme='dark'] {
  #zotero-tb-toggle-item-pane,
  #zotero-tb-toggle-notes-pane {
    background: var(--nord1) !important;
  }
  #zotero-tb-toggle-item-pane span,
  #zotero-tb-toggle-notes-pane span {
    display: none;
  }
  #zotero-tb-split {
    background: var(--nord0) !important;
  }

  /* ------------------------------- */

  /* 'deck' context notes pane */
  #zotero-context-toolbar-extension,
  .zotero-context-notes-list,
  .notes-list-container {
    background: var(--nord0) !important;
    color: var(--nord5) !important;
  }

  /* search bar at the top of context notes pane */
  [theme='dark'] .zotero-context-notes-list textbox[type='search'] {
    filter: var(--dark-filter);
  }

  /* '+' button */
  [theme='dark'] .header-row button {
    background-color: var(--nord2) !important;
    color: var(--nord5) !important;
  }

  /* boxes/cards for notes 'rows' in context notes pane */
  [theme='dark'] .note-row,
  [theme='dark'] .more-row,
  [theme='dark'] .note-row .inner .body-line .date {
    background-color: var(--nord2) !important;
    color: var(--nord5) !important;
  }

  /* ------------------------------- */

  /* related items tab pane -> 'add' button */
  [theme='dark'] .zotero-editpane-related #addButton {
    -moz-appearance: none !important;
    background-color: var(--nord2) !important;
    color: var(--nord5) !important;
  }

  /* --------------------------------- */

  /* 'add' notes button in library view*/
  [theme='dark'] #zotero-editpane-notes-add {
    -moz-appearance: none !important;
    background-color: var(--nord2) !important;
    color: var(--nord5) !important;
  }

  /* --------------------------------- */

  /* new tag input in 'tags' tab pane */
  [theme='dark'] .tag .editable.editing {
    filter: var(--dark-filter);
  }

  /* --------------------------------- */

  /* dropdown icon button of 'author'/publisher data entry field in first context tab */
  [theme='dark'] .creator-type-label image {
    filter: var(--dark-filter);
  }

  /* --------------------------------- */

  .toolbar-button:hover {
    background-color: var(--nord3);
  }

  body {
    background-color: var(--body-background-color) !important;
  }

  a {
    background-color: var(--a-background-color) !important;
  }

  .ProseMirror-hideselection {
    caret-color: var(--a-background-color) !important;

    *::-moz-selection {
      background: var(--a-background-color) !important;
    }

    *::selection {
      background: var(--a-background-color) !important;
    }
  }

  .citation {
    &.selected,
    &:hover {
      background-color: var(--citation-hover-background-color) !important;
    }

    &.ProseMirror-selectednode {
      background-color: var(
        --citation-ProseMirror-selectednode-background-color
      ) !important;
    }
  }

  .find {
    background-color: var(--find-background-color) !important;
  }

  .ProseMirror-gapcursor:after {
    border-top: 1px solid var(--ProseMirror-gapcursor-after-border-top) !important;
  }

  .primary-editor {
    p,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      color: var(--h6-color) !important;
    }

    blockquote {
      border-left: 3px solid var(--blockquote-border-left) !important;
      border-right: 3px solid var(--blockquote-border-left) !important;
    }

    pre {
      background: var(--pre-background) !important;
    }

    math-inline,
    math-display {
      color: var(--nord6) !important;
    }

    p code {
      background: var(--pre-background) !important;
    }

    table {
      border: 1px solid var(--table-border) !important;

      td,
      th {
        border: 1px solid var(--table-border) !important;
      }

      .selectedCell:after {
        background: var(
          --primary-editor-selectedCell-after-background
        ) !important;
      }

      .column-resize-handle {
        background-color: var(
          --primary-editor-column-resize-handle-background-color
        ) !important;
      }
    }

    hr {
      background-color: var(--table-border) !important;

      &.ProseMirror-selectednode {
        background-color: var(
          --primary-editor-column-resize-handle-background-color
        ) !important;
      }
    }

    &.column-resize-handle {
      background-color: var(
        --primary-editor-column-resize-handle-background-color
      ) !important;
    }

    &.selectedCell:after {
      background: var(
        --primary-editor-selectedCell-after-background
      ) !important;
    }
  }

  .ProseMirror .empty-node::before {
    color: var(--empty-node--before-color) !important;
  }

  .node-selected {
    background-color: var(--node-selected-background-color) !important;
  }

  .blocks-selected *::-moz-selection {
    background-color: var(--a-background-color) !important;
  }

  .blocks-selected *::selection {
    background-color: var(--a-background-color) !important;
  }

  .ProseMirror-selectednode {
    background-color: var(
      --citation-ProseMirror-selectednode-background-color
    ) !important;
  }

  .regular-image .resized-wrapper .image {
    border: 1px solid var(--image-border) !important;
  }

  .external-image .resized-wrapper {
    border: 1px solid var(--image-border) !important;
  }

  .import-placeholder-image .image {
    background-color: var(--image-background-color) !important;
  }

  .popup-container {
    .popup {
      background-color: var(--body-background-color) !important;
      border: 1px solid var(--image-border) !important;
      box-shadow: 0 0 24px 0 var(--popup-box-shadow) !important;
    }

    &::before,
    &::after {
      border: solid var(--a-background-color) !important;
    }

    &[class*='bottom'] {
      &::before {
        border-bottom-color: var(--before-border-bottom-color) !important;
      }
      &::after {
        border-bottom-color: var(--body-background-color) !important;
      }
    }

    &[class*='top'] {
      &::before {
        border-top-color: var(--before-border-bottom-color) !important;
      }

      &::after {
        border-top-color: var(--body-background-color) !important;
      }
    }

    button {
      background: var(--body-background-color) !important;

      &:hover {
        background: var(--button-hover-background) !important;
      }
    }
  }

  .findbar {
    color: var(--findbar-color) !important;
    border-bottom: 1px solid var(--image-border) !important;

    .findbar .line .input-box {
      border: 1px solid var(--image-border) !important;

      .buttons {
        color: var(--button-color) !important;

        .button {
          &:hover,
          &.hover {
            background-color: var(--button-hover-background) !important;
          }

          &.active,
          &:active {
            color: var(--body-background-color) !important;
            background-color: var(--button-color) !important;
          }
        }

        .text-button {
          border: 1px solid var(--image-background-color) !important;
        }
      }
    }
  }

  .noticebar {
    color: var(--ProseMirror-gapcursor-after-border-top) !important;
    border-bottom: 1px solid var(--image-border) !important;
    background: var(--noticebar-background) !important;
  }

  .toolbar {
    color: var(--button-color) !important;
    border-bottom: 1px solid var(--image-border) !important;
  }

  .toolbar-button {
    color: var(--button-color) !important;

    &:hover {
      background-color: var(--button-hover-background) !important;
    }

    &:active,
    &.active {
      color: var(--body-background-color) !important;
      background-color: var(--button-color) !important;
    }
  }

  .dropdown .popup {
    background-color: var(--body-background-color) !important;
    border: 1px solid var(--image-border) !important;
    box-shadow: 0 0 24px 0 var(--popup-box-shadow) !important;
  }

  .text-dropdown .popup .inline-options {
    border-bottom: 1px solid var(--image-border) !important;
  }

  .text-dropdown .popup .block-options .option:hover {
    background-color: var(--button-hover-background) !important;
  }

  .text-dropdown .popup .block-options .option.active {
    color: var(--body-background-color) !important;
  }

  .text-dropdown .popup .block-options .option.active {
    background-color: var(--button-color) !important;
  }

  .colors-dropdown,
  .font-colors-dropdown {
    .popup .grid {
      border-bottom: 1px solid var(--image-border) !important;

      .color-button:hover {
        background-color: var(--button-hover-background) !important;
      }

      .icon-color {
        border: 1px solid var(--icon-color-border) !important;
      }

      .clear {
        border: 2px solid var(--ProseMirror-gapcursor-after-border-top) !important;
      }
    }
  }

  .more-dropdown .popup hr {
    border-bottom: 1px solid var(--image-border) !important;
  }

  .more-dropdown .popup .option:hover {
    background-color: var(--button-hover-background) !important;
  }

  * {
    border-width: 0px;
    transition: color 0.15s ease, background-color 0.15s ease, filter 0.4s ease;
  }

  body {
    background: var(--nord0) !important;
  }
  sidebarResizer {
    background: var(--nord0) !important;
  }

  div#viewer .page {
    background-color: var(--nord0) !important;
    border: 9px solid transparent !important;
  }

  .page-popup-container .page-popup {
    background-color: var(--nord1);
    color: var(--nord5);

    &::before {
      background-color: var(--nord1);
      color: var(--nord5);
    }
    &[class*='bottom']::after {
      border-bottom-color: var(--nord1);
    }
  }

  /* div#viewer .page .canvasWrapper {
	        	  filter: var(--dark-filter) !important;
        		  border-image: none;
	        	}
                */

  #viewer {
    background-color: var(--nord0) !important;
  }

  #sidebarContent {
    background-color: var(--nord0) !important;
  }

  #toolbarSidebar {
    background-color: var(--nord0) !important;
    color: var(--nord5) !important;
    border: 0;
  }

  #toolbarContainer,
  #toolbarViewer {
    background-color: var(--nord0) !important;
    color: var(--nord5) !important;
  }

  #toolbarViewer button {
    filter: brightness(0.91) grayscale(0.15) invert(0.95) sepia(0.65)
      hue-rotate(180deg) !important;
    border-image: none !important;
    border-radius: 1rem;
  }

  #toolbarViewer #reader-toolbar-button-color-picker {
    filter: none !important;
  }

  #selector .tags {
    color: var(--nord5) !important;
  }

  .search {
    background-color: var(--nord2) !important;
    color: var(--nord4) !important;
    border: 0 !important;
  }

  .preview header {
    border-width: 0px !important;
  }

  .preview .comment {
    border-width: 0px !important;
  }

  .area-annotation {
    border-width: 3px;
  }

  .area-selector {
    border: 3px solid;
  }

  .annotation {
    background-color: var(--nord2) !important;
    color: var(--nord5) !important;
    padding: 0.3rem;
    border-color: var(--nord3) !important;

    .highlight {
      color: var(--nord4) !important;
    }
    &:hover {
      background-color: var(--nord3) !important;
    }
  }

  #toolbarViewer button:hover {
    background: var(--nord3) !important;
    cursor: pointer !important;
  }

  .splitToolbarButton {
    filter: var(--dark-filter) !important;
  }

  #outlineView .treeItem > a {
    color: var(--nord4) !important;
  }
  #annotationsView .search {
    margin: 6px 5px !important;
  }

  #annotationsView .search input {
    background: var(--nord4);
  }

  .editor .content:focus {
    cursor: text;
    background: var(--nord1) !important;
  }

  .editor .content:empty::before {
    content: attr(placeholder) !important;
    color: var(--nord4);
  }

  .editor .content:empty:focus::before {
    color: var(--nord4);
  }

  .annotation-popup .editor .content:empty::before {
    color: var(--nord4);
  }

  .annotations {
    color: var(--nord4);
  }

  .editor .bubble {
    background-color: var(--nord6) !important;
    border: 1px solid var(--nord4) !important;
    margin-top: -15px;
    border-radius: 5px;
  }
  .editor .bubble .button:hover {
    background-color: var(--nord4) !important;
  }
  #zotero-context-toolbar-extension {
    background: var(--nord0) !important;
    background-color: var(--nord0) !important;
  }
  box#zotero-tab-toolbar {
    background: var(--nord0) !important;
    background-color: var(--nord0) !important;
  }
  box#zotero-tb-split {
    background: var(--nord0) !important;
    background-color: var(--nord0) !important;
  }
  .notes-container,
  .zotero-context-notes-list {
    background-color: var(--nord1) !important;
  }

  #zotero-context-notes-list textbox {
    background-color: var(--nord4) !important;
  }

  .notes-list {
    color: var(--nord6) !important;
  }

  .notes-list .body-line {
    color: var(--nord4) !important;
  }

  .note-row .inner,
  .more-row {
    background-color: var(--nord1) !important;
  }

  .header-row button {
    background-color: var(--nord6) !important;
    color: var(--nord1) !important;
    border-radius: 5px !important;
  }

  .toolbar {
    background: var(--nord0) !important;
  }
  .editor .toolbar-button {
    color: var(--nord4);
  }

  .primary-editor p {
    color: var(--nord6);
  }

  .splitToolbarButton .button,
  .tool-group button,
  .annotation-tools button,
  .toolbar button {
    box-shadow: none !important;
    background: none !important;
    cursor: pointer !important;
  }

  .splitToolbarButton .button,
  .tool-group button,
  .annotation-tools button,
  .toolbar button {
    background: none;
  }

  .toolbar #pageNumber {
    padding: 0 4px;
    background: linear-gradient(
      to bottom,
      var(--nord2),
      var(--nord1)
    ) !important;
    box-shadow: none !important;
    color: var(--nord5) !important;

    border-radius: 3px;
  }
  .toolbar #numPages {
    color: var(--nord4) !important;
  }

  .zotero-editpane-tabs {
    background: var(--nord1) !important;
  }

  .zotero-editpane-tabs .tab {
    background: var(--nord3);
  }
  #zotero-context-pane-inner {
    background-color: var(--nord0);
  }

  .zotero-context-pane-editor-parent-line {
    background-color: var(--nord0);
    color: var(--nord4);
  }
  #links-container {
    background-color: var(--nord0);
    color: var(--nord4);
  }
  .toolbar .annotation-tools .toolbarButton > span {
    background: none !important;
  }

  .zotero-editpane-tabs tab label:not(.zotero-clicky) {
    color: var(--nord4);
  }

  .zotero-editpane-tabs tab[selected='true'] {
    filter: var(--dark-filter) !important;
  }

  toolbarbutton {
    background: none;
  }

  toolbarbutton dropmarker {
    filter: var(--dark-filter);
  }

  .toolbarbutton span {
    background: none !important;
  }

  #sidebarContainer {
    border-width: 0px !important;
  }
}
